<template>
  <div class="addVisitor2">
    <div class="add-message">
      <h1>添加就诊人</h1>
      <p>请确保就诊人信息真是准确，一旦创建成功，不允许修改</p>
      <div class="add-message-content">
        <van-form @submit="onSubmit">
          <!-- 证件类型 -->
          <van-cell
            is-link
            title="国籍"
            @click="countryShow = true"
            :value="countryCard"
            required
          />
          <van-action-sheet
            v-model="countryShow"
            :actions="countryActions"
            @select="countrySelect"
            required
          />

          <!-- 民族 -->
          <van-cell
            is-link
            title="民族"
            @click="nationShow = true"
            :value="nationCard"
            required
          />
          <van-action-sheet
            v-model="nationShow"
            :actions="nationActions"
            @select="nationSelect"
            required
          />

          <!-- 婚姻状态 -->
          <van-cell
            is-link
            title="婚姻状态"
            @click="marriageShow = true"
            :value="marriageCard"
            required
          />
          <van-action-sheet
            v-model="marriageShow"
            :actions="marriageActions"
            @select="marriageSelect"
            required
          />

          <!-- 职业 -->
          <van-cell
            is-link
            title="职业"
            @click="occupationShow = true"
            :value="occupationCard"
            required
          />
          <van-action-sheet
            v-model="occupationShow"
            :actions="occupationActions"
            @select="occupationSelect"
            required
          />

          <!-- 单位名称输入框 -->
          <van-field
            v-model="UnitName"
            label="单位名称"
            placeholder="请填写单位名称"
            required
          />

          <!-- 家庭地址 -->
          <van-cell
            title="家庭地址"
            is-link
            :value="homeAddress"
            @click="homeShow = true"
            required
          />
          <van-action-sheet v-model="homeShow" title="家庭住址">
            <div class="content">
              <van-area
                title="地址"
                :area-list="areaList"
                value="110101"
                v-show="home"
                @confirm="onConfirm"
                @cancel="onCancel"
              />
            </div>
          </van-action-sheet>

          <!-- 填写家庭地址详细地址 -->
          <van-field
            v-model="homeDetailedaddress"
            placeholder="请填写家庭住址详细信息"
            class="detailedaddress"
          />

          <!-- 现住址区县 -->
          <van-cell
            title="现住址区县"
            is-link
            :value="nowAddress"
            @click="nowShow = true"
            required
          />
          <van-action-sheet v-model="nowShow" title="家庭住址">
            <div class="content">
              <van-area
                title="地址"
                :area-list="areaList1"
                value="110101"
                v-show="now"
                @confirm="onConfirm1"
                @cancel="onCancel1"
              />
            </div>
          </van-action-sheet>

          <!-- 现住址详细信息 -->
          <van-field
            v-model="nowDetailedaddress"
            placeholder="请填写现住址详细信息"
            class="detailedaddress"
          />

          <!-- 联系人姓名 -->
          <van-field
            v-model="contacts"
            label="联系人姓名"
            placeholder="请输入"
            required
          />

          <!-- 联系人身份证 -->
          <van-field
            v-model="contactID"
            label="联系人身份证"
            placeholder="请输入"
            required
          />

          <!-- 提交按钮 -->
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="$router.push('/patient')"
            >提交
          </van-button>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddVisitor2",

  data() {
    return {
      // 国籍
      countryShow: false,
      countryActions: [{ name: "中国" }, { name: "俄罗斯" }, { name: "朝鲜" }],
      countryCard: "中国",

      // 民族
      nationShow: false,
      nationActions: [{ name: "汉族" }, { name: "回族" }, { name: "朝鲜族" }],
      nationCard: "汉族",

      // 婚姻状态
      marriageShow: false,
      marriageActions: [{ name: "已婚" }, { name: "未婚" }],
      marriageCard: "已婚",

      // 职业
      occupationShow: false,
      occupationActions: [{ name: "软件" }, { name: "护士" }, { name: "教师" }],
      occupationCard: "软件",

      // 单位地址
      UnitName: "",

      // 家庭住址
      homeShow: false,
      homeAddress: "省 > 市 > 区",
      home: "北京市 北京市 东城区",
      areaList: {
        province_list: {
          110000: "北京市",
          // 120000: "天津市",
        },
        city_list: {
          110100: "北京市",
          // 120100: "天津市",
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
          110103: "朝阳区",
          110104: "海淀区",
          110105: "顺义区",
          110106: "房山区",
          110107: "昌平区",
          110108: "大兴区",
          110109: "怀柔区",
          110110: "平谷区",
          110111: "密云区",
          110112: "延庆区",
          110113: "门头沟区",
        },
      },

      // 家庭详细住址
      homeDetailedaddress: "",

      // 现住址区县
      nowShow: false,
      nowAddress: "省 > 市 > 区",
      now: "北京市 北京市 东城区",
      areaList1: {
        province_list: {
          110000: "北京市",
          // 120000: "天津市",
        },
        city_list: {
          110100: "北京市",
          // 120100: "天津市",
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
          110103: "朝阳区",
          110104: "海淀区",
          110105: "顺义区",
          110106: "房山区",
          110107: "昌平区",
          110108: "大兴区",
          110109: "怀柔区",
          110110: "平谷区",
          110111: "密云区",
          110112: "延庆区",
          110113: "门头沟区",
        },
      },

      // 现住址详细信息
      nowDetailedaddress: "",

      // 联系人姓名
      contacts: "",

      // 联系人身份证
      contactID: "",
    };
  },

  mounted() {},

  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    // 国籍
    countrySelect(item) {
      this.countryShow = false;
      this.$toast(item.name);
      this.countryCard = item.name;
    },
    // 民族
    nationSelect(item) {
      this.nationShow = false;
      this.$toast(item.name);
      this.nationCard = item.name;
    },
    // 婚姻状态
    marriageSelect(item) {
      this.marriageShow = false;
      this.$toast(item.name);
      this.marriageCard = item.name;
    },
    // 职业
    occupationSelect(item) {
      this.occupationShow = false;
      this.$toast(item.name);
      this.occupationCard = item.name;
    },
    // 家庭住址
    onConfirm(data) {
      // console.log(data);
      this.homeAddress = "";
      for (let i = 0; i < data.length; i++) {
        this.homeAddress += data[i].name + ">";
      }
      this.homeShow = false;
    },
    onCancel() {
      this.homeShow = false;
    },
    // 现住址区县
    onConfirm1(data) {
      // console.log(data);
      this.nowAddress = "";
      for (let i = 0; i < data.length; i++) {
        this.nowAddress += data[i].name + ">";
      }
      this.nowShow = false;
    },
    onCancel1() {
      this.nowShow = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.add-message {
  width: 90%;
  margin: 100% auto;

  h1 {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
  }

  > p {
    font-size: 14px;
    text-align: center;
    margin: 30px auto;
    color: #e8be78;
  }
}

.add-message-content {
  .van-form {
    .van-cell {
      border-bottom: 2px solid #b4b4b4;
    }
  }
}

button {
  margin-top: 30px;
}
</style>